<template>
    <div class="container">
        <!-- header -->
        <mt-header fixed class="mui-clearfix" id="header">
            <div slot="left" @click="toAddress">
                <span class="el-icon-location"></span>
                <span>{{$store.state.address}}</span>
                <span class="el-icon-caret-bottom"></span>
            </div>
        </mt-header>
        <!-- search -->
        <div class="mui-input-row mui-search homeSearch">
            <input type="search" class="mui-input-clear" placeholder="搜索饿了么商家、商品名称" @click="toSearch">
        </div>
        <!-- goodsList -->
        <goodsList></goodsList>
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import goodsList from '../goods/goodsList'
export default {
    components: {
        'goodsList': goodsList
    },
    methods: {
        toAddress() {
            if (this.$store.state.status == 0) {
                MessageBox('饿了么提示', '您还未登录');
                this.$router.push({path: '/login'})
            } else {
                this.$router.push({path: '/address'})
            }
        },
        toSearch() {
            this.$router.push({path: '/search'})
        }
    }
}
</script>

<style>
    /* search */
    .homeSearch .mui-icon {
        line-height: 2.5;
    }
    .mui-placeholder,
    .homeSearch .mui-input-clear {
        font-size: 14px!important;
        font-family: simsun;
    }
</style>

<style scoped>
    /* container */
    .container {
        position: relative;
        background: #fff;
        top: 50px;
        left: 0;
        right: 0;
        padding-bottom: 55px;
    }
    /* header */
    header.mint-header.is-fixed {
        height: 50px;
        z-index: 99;
        text-align: left;
        padding: 7px 15px 0;
        font-size: 18px;
        font-weight: 700;
        background-image: linear-gradient(90deg,#0af,#0085ff);
    }
    .el-icon-caret-bottom {
        font-size: 1px;
    }
    /* search */
    .mui-search {
        margin-top: -5px;
        padding: 7px 14px;
        background-image: linear-gradient(90deg,#0af,#0085ff);
        height: 50px;
    }
    .mui-input-clear {
        border-radius: 0;
        background: #fff;
        height: 36px;
    }
</style>
